<template>
  <div class="commodity-list-top" @click="hideList">
    <div class="commodity-list-top-left">
      <!-- 搜索编号框 -->
      <div class="commodity-list-top-input1" v-if="searchData[0].numberingBox">
        <input type="text" placeholder="请输入名称/编号/规格/规格编号">
        <span class="iconfont icon-test126"></span>
      </div>
      <!-- 循环 -->
      <div v-for="(item,index) in searchData[1]" :key="index">
        <!-- 可以展开的框 -->
        <div
          class="commodity-list-top-input2"
          @click.stop="showList(index)"
          v-if="item.labelList.length == 0"
        >
          <input type="text" :placeholder="item.placeholder" v-model="valueArr">
          <span
            class="iconfont icon-test232 juzhong"
            :class="index === showLists ? 'fanzhuan' : ''"
            @click.stop="hideList(index)"
          ></span>
          <div class="commodity-list-top-input2-posi" v-if="index === showLists">
            <ul>
              <li v-for="(items,index) in item.classificationList" :key="index">
                <div
                  class="commodity-list-top-input2-posi-left gaoliang"
                  @click="setValue(items.name)"
                >
                  <span
                    v-if="items.children.length != 0"
                    class="iconfont icon-test178"
                    :class="index === arr ? '' : 'nine'"
                    @click.stop="optionArr(index)"
                  ></span>
                  <span v-else></span>
                  {{items.name}}
                </div>
                <div v-if="index === arr" class="commodity-list-top-input2-posi-down">
                  <ul>
                    <li v-for="(data,index) in items.children" :key="index">
                      <div
                        class="commodity-list-top-input2-posi-left gaoliang"
                        @click="setValue(data.name)"
                      >
                        <span
                          v-if="data.children.length != 0"
                          class="iconfont icon-test178"
                          :class="index === arrs ? '' : 'nine'"
                          @click.stop="optionArrs(index)"
                        ></span>
                        <span v-else></span>
                        {{data.name}}
                      </div>
                      <div v-if="index === arrs" class="commodity-list-top-input2-posi-down">
                        <ul>
                          <li v-for="(datas,index) in data.children" :key="index">
                            <div
                              class="commodity-list-top-input2-posi-left gaoliang"
                              @click="setValue(datas.name)"
                            >
                              <span></span>
                              {{datas.name}}
                            </div>
                          </li>
                        </ul>
                      </div>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 不可展开的框 -->
        <div v-if="item.classificationList == ''">
          <div class="commodity-list-top-input3" @click.stop="showList1(index)">
            <input type="text" :placeholder="item.placeholder" v-model="valueArrs">
            <span
              class="iconfont icon-test232 juzhong"
              :class="index === showLists1 ? 'fanzhuan' : ''"
              @click.stop="hideList(index)"
            ></span>
            <div
              :class="item.labelList.length > 8 ? 'commodity-list-top-input3-posi-s' : 'commodity-list-top-input3-posi'"
              v-if="index === showLists1"
            >
              <ul>
                <li
                  v-for="(items,index) in item.labelList"
                  :key="index"
                  @click="setValues(items)"
                >{{items}}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <span
        class="commodity-list-top-search"
        @click.stop="openseach"
        v-if="searchData[2].gaojiseach ? searchData[2].gaojiseach : false"
      >高级搜索</span>
    </div>
    <div class="commodity-list-right">
      <span v-if="searchData[2].daochu ? searchData[2].daochu : false">
        <i class="iconfont icon-test151"></i>导出
      </span>
      <span v-if="searchData[2].daoru ? searchData[2].daoru : false">
        <i class="iconfont icon-test195"></i>导入
      </span>
      <span v-if="searchData[2].add ? searchData[2].add : false">
        <i class="iconfont icon-test214"></i>新增
      </span>
    </div>
    <div class="commodity-list-down" v-if="gaojiseach">
      <h4>高级搜索</h4>
      <div class="commodity-list-down-content">
        <div class="content-left">
          <div class="content-left-title">
            <span>商品名称</span>
            <div>
              <input type="text" placeholder="请输入商品名称">
            </div>
          </div>
          <div class="content-left-title">
            <span>规格名称</span>
            <div>
              <input type="text" placeholder="请输入规格名称">
            </div>
          </div>
          <div class="content-left-title">
            <span>分类</span>
            <div>
              <input type="text" placeholder="请选择分类">
            </div>
          </div>
          <div class="content-left-title">
            <span>品牌</span>
            <div>
              <input type="text" placeholder="请选择品牌">
            </div>
          </div>
          <div class="content-left-title">
            <span>商品条形码</span>
            <div>
              <input type="text" placeholder="请输入商品条形码">
            </div>
          </div>
          <div class="content-left-title">
            <span>风格</span>
            <div>
              <input type="text" placeholder="请选择风格">
            </div>
          </div>
          <div class="content-left-title">
            <span>季节</span>
            <div>
              <input type="text" placeholder="请输入季节">
            </div>
          </div>
          <div class="content-left-title">
            <span>商品状态</span>
            <span>全部</span>
            <span>上架</span>
            <span>已下架</span>
          </div>
        </div>
        <div class="content-left">
          <div class="content-left-title">
            <span>商品编号</span>
            <div>
              <input type="text" placeholder="请输入商品编号">
            </div>
          </div>
          <div class="content-left-title">
            <span>规格编号</span>
            <div>
              <input type="text" placeholder="请输入规格编号">
            </div>
          </div>
          <div class="content-left-title">
            <span>商品标签</span>
            <div>
              <input type="text" placeholder="请输入商品标签">
            </div>
          </div>
          <div class="content-left-title">
            <span>供应商</span>
            <div>
              <input type="text" placeholder="请选择供应商">
            </div>
          </div>
          <div class="content-left-title">
            <span>销售价</span>
            <div class="content-left-title-div">
              <div class="content-left-title-two">
                ￥
                <input type="text" placeholder="金额下限">
              </div>
              <span class="content-left-title-zhong">—</span>
              <div class="content-left-title-two">
                ￥
                <input type="text" placeholder="金额上限">
              </div>
            </div>
          </div>
          <div class="content-left-title">
            <span>季节</span>
            <div>
              <input type="text" placeholder="请选择季节">
            </div>
          </div>
        </div>
      </div>
      <div class="content-left-down">
        <div></div>
        <div>
          <button class="bot1">清空</button>
          <button class="bot2" @click="endseach">取消</button>
          <button class="bot3">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['searchData'],
  data () {
    return {
      arr: '',
      arrs: '',
      valueArr: '',
      valueArrs: '',
      showLists: false,
      showLists1: false,
      gaojiseach: false
    }
  },
  methods: {
    openseach () {
      this.gaojiseach = true
    },
    endseach () {
      this.gaojiseach = false
    },
    optionArr (index) {
      if (this.arr === index) {
        this.arr = ''
      } else {
        this.arr = index
      }
    },
    optionArrs (index) {
      if (this.arrs === index) {
        this.arrs = ''
      } else {
        this.arrs = index
      }
    },
    setValue (index) {
      this.valueArr = index
    },
    showList (index) {
      this.showLists = index
      this.showLists1 = false
    },
    showList1 (index) {
      // console.log(index)
      this.showLists = false
      this.showLists1 = index
    },
    hideList () {
      this.showLists = false
      this.showLists1 = false
    },
    setValues (value) {
      this.valueArrs = value
    }
  },
  components: {

  },
  created () {
    this.showLists = false
    // console.log(this.valueArr)
  }
}
</script>

<style lang="scss" scoped>
.commodity-list-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 24px;
  min-height: 60px;
  background-color: #fff;
  align-items: center;
  position: relative;
  .commodity-list-down {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 96%;
    background-color: #fff;
    padding: 2% 2% 0 2%;
    box-shadow: 0 0 20px #c6c6c6;
    h4 {
      font-weight: 500;
      margin-bottom: 20px;
    }
    .commodity-list-down-content {
      display: flex;
      border-bottom: 1px solid #e3e3e3;
      padding-bottom: 10px;
      .content-left {
        width: 50%;
        font-size: 12px;
        .content-left-title {
          display: flex;
          line-height: 40px;
          margin-bottom: 10px;
          span {
            display: inline-block;
            width: 64px;
            text-align: right;
            margin-right: 10px;
          }
          div {
            display: flex;
            border: 1px solid #e3e3e3;
            width: 75%;
            input {
              width: 75%;
              margin-left: 15px;
            }
          }
          .content-left-title-div {
            border: 0;
          }
          .content-left-title-zhong {
            width: 15px;
            text-align: center;
            margin: 0 5px;
          }
          .content-left-title-two {
            padding: 0 6px;
            width: 100%;
            input {
              width: 80%;
            }
          }
        }
      }
    }
    .content-left-down {
      display: flex;
      justify-content: space-between;
      padding: 20px 0;
      div {
        button {
          margin-left: 15px;
          outline: none;
        }
        .bot1 {
          border: 0;
          background-color: #fff;
          color: #000;
        }
        .bot2 {
          background-color: #fff;
          width: 100px;
          line-height: 30px;
          border: #63c6ed 1px solid;
          color: #63c6ed;
        }
        .bot3 {
          width: 100px;
          line-height: 30px;
          background-color: #63c6ed;
          color: #fff;
          border: 0;
        }
      }
    }
  }
}
.commodity-list-top-left {
  display: flex;
  flex-direction: row;
}
.commodity-list-top-input1 {
  display: flex;
  flex-direction: row;
  border: 1px #e3e3e3 solid;
  width: 240px;
  background-color: #fff;
  padding: 0 0 0 12px;
  height: 32px;
  margin-right: 16px;
}
.commodity-list-top-input1 input {
  line-height: 32px;
  width: 202px;
}
.commodity-list-top-input1 span {
  display: inline-block;
  width: 50px;
  height: 100%;
  text-align: center;
  color: #b3b3b3;
  line-height: 32px;
}
.icon-test126:before {
  font-size: 16px;
}
.icon-test232:before {
  font-size: 12px;
}

.icon-test151:before,
.icon-test195:before,
.icon-test214:before {
  font-size: 16px;
  margin-right: 5px;
}
.iconfont {
  font-size: 16px !important;
}
input::-webkit-input-placeholder {
  color: #b3b3b3;
  font-size: 12px;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #b3b3b3;
  font-size: 12px;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #b3b3b3;
  font-size: 12px;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #b3b3b3;
  font-size: 12px;
}
.commodity-list-top-input2 {
  position: relative;
  width: 128px;
  height: 32px;
  line-height: 32px;
  margin-right: 16px;
  padding: 0 0 0 12px;
  border: 1px #e3e3e3 solid;
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 3;
}
.commodity-list-top-input2 input,
.commodity-list-top-input3 input {
  width: 100px;
}
.commodity-list-top-input2 span,
.commodity-list-top-input3 span {
  display: inline-block;
  width: 20px;
  height: 32px;
  line-height: 32px;
}
.commodity-list-top-input3 {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 120px;
  height: 32px;
  padding: 0 10px 0 12px;
  border: 1px #e3e3e3 solid;
  align-items: center;
  line-height: 32px;
  margin-right: 16px;
  z-index: 3;
}
.commodity-list-top-input3-posi {
  width: 140px;
}

.commodity-list-top-input3-posi-s:hover {
  overflow: scroll;
  overflow-x: hidden;
  padding-right: 0px;
  width: 140px;
}
.commodity-list-top-input3-posi ul li,
.commodity-list-top-input3-posi-s ul li {
  padding-left: 35px;
}

.commodity-list-top-search {
  display: inline-block;
  font-size: 14px;
  line-height: 32px;
  margin-left: 10px;
}
.commodity-list-right {
  display: flex;
  // flex-direction: row;
  color: #20ade5;
  font-size: 16px;
  align-items: center;
}
.commodity-list-right span {
  margin: 0 8px;
  align-content: center;
  display: flex;
  align-items: center;
}
.commodity-list-top-input2-posi,
.commodity-list-top-input3-posi,
.commodity-list-top-input3-posi-s {
  position: absolute;
  top: 32px;
  left: 0;
  background-color: #fff;
  border: 1px #e3e3e3 solid;
  overflow: hidden;
  font-size: 14px;
  padding-bottom: 10px;
}
.commodity-list-top-input2-posi,
.commodity-list-top-input3-posi-s {
  padding-right: 20px;
  width: 120px;
  height: 256px;
}
.commodity-list-top-input2-posi:hover {
  overflow: scroll;
  overflow-x: hidden;
  padding-right: 0px;
  width: 140px;
}

.nine {
  transform: rotate(270deg);
  -ms-transform: rotate(270deg); /* Internet Explorer */
  -moz-transform: rotate(270deg); /* Firefox */
  -webkit-transform: rotate(270deg); /* Safari 和 Chrome */
  -o-transform: rotate(270deg); /* Opera */
}
.commodity-list-top-input2-posi ul li .commodity-list-top-input2-posi-left {
  padding-left: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
}
.commodity-list-top-input2-posi ul li .gaoliang:hover,
.commodity-list-top-input3-posi ul li:hover,
.commodity-list-top-input3-posi-s ul li:hover {
  background-color: #f0fbff;
}
.commodity-list-top-input2-posi-down {
  margin-left: 25px;
}
.fanzhuan {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* Internet Explorer */
  -moz-transform: rotate(180deg); /* Firefox */
  -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
  -o-transform: rotate(180deg); /* Opera */
}
.juzhong {
  text-align: center;
}
</style>
